<template>
    <!--处理中订单-->
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.handingList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="phone" label="">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="teamId" label="">
                            <el-select v-model="form.teamId" clearable :placeholder="$t('common.orderStatus')" style="width: 100%"><!--订单状态-->
                                <el-option v-for="item in collectStagesData" v-if="item.name !== 'S0'" :key="item.id" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="telFeedBack">
                            <el-select v-model="form.telFeedBack" clearable :placeholder="$t('collection.contactResult')" style="width: 100%"><!--联络结果-->
                                <el-option v-for="telFeedBack in telFeedBackData" :key="telFeedBack.nid" :value="telFeedBack.nid" :label="telFeedBack.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="collectionUserName">
                            <select-account-list :type="selectDataType" v-model="form.collectionUserName" :placeholder="$t('common.recruiter')"></select-account-list>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="commitCount">
                            <el-input v-model.number="form.commitCount" :placeholder="$t('tel.followTimes')" clearable></el-input><!--跟进次数-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productChannel" label="">
                            <el-input v-model="form.productChannel" :placeholder="$t('common.applicationMarket')" clearable></el-input><!--应用市场-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="source" label="">
                            <el-input v-model="form.source" :placeholder="$t('common.applyChannel')" clearable></el-input><!--申请渠道-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appVersion" label="">
                            <el-input v-model="form.appVersion" :placeholder="$t('common.versionName')" clearable></el-input><!--版本号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appPackage" label="">
                            <el-input v-model="form.appPackage" :placeholder="$t('system.appPackage')" clearable></el-input><!--app包名-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="isPartRepay">
                            <el-select v-model="form.isPartRepay" clearable :placeholder="$t('common.partialRepay')" style="width: 100%"><!--部分还款-->
                                <el-option key="0" :label="$t('common.presence')" :value="1"></el-option>
                                <el-option key="1" :label="$t('common.none')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="applyTime" label=""><!--申请时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="promiseTime" style="width: 100%"><!--承诺还款时间-->
                            <el-date-picker
                                    v-model="form.promiseTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    style="width: 100%;"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.promiseStartTime')"
                                    :end-placeholder="$t('common.promiseEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="lastContactTime" style="width: 100%"><!--最后联系时间-->
                            <el-date-picker
                                    v-model="form.lastContactTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    style="width: 100%;"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.lastContactStartTime')"
                                    :end-placeholder="$t('common.lastContactEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"  v-show="domain!='Bene'">
                        <el-form-item prop="extensionStatus">
                            <el-select v-model="form.extensionStatus" clearable :placeholder="$t('common.whetherExtensioning')" style="width: 100%"><!--是否展期中-->
                                <el-option key="0" :label="$t('common.extensioning')" :value="1"></el-option>
                                <el-option key="1" :label="$t('common.notExtensioning')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <!-- <el-button @click="exportData" type="primary">{{ $t('common.export') }}</el-button> -->
                        <el-button @click="generateFail" type="primary">{{ $t('common.generateExportFail') }}</el-button>

                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <div class="totalAmount"><span>{{ $t('common.contractAmount') }}：PHP {{ contractAmount | formatCurrency }}</span><span>{{ $t('common.shouldRepayAmount') }}：PHP {{ shouldRepayAmount | formatCurrency }}</span><span>{{ $t('common.actRepayAmount') }}：PHP {{ payedAmount | formatCurrency }}</span></div>
                    <el-table ref="table" :data="tableData" @sort-change="changeTableSearch" :row-class-name="tableRowClassName" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="orderId" :label="$t('common.innerOrderId')" width="180"><!--内部订单号-->
                            <template slot-scope="{ row }">
                                <a @click="beforeGoDetail(row)" type="text" size="small" v-if="row.orderId" :class="{'purple_color': row.extensionStatus === 1}" href="javascript:void(0);">{{ row.orderId }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userId" label="User ID" min-width="120"></el-table-column>
                        
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span>{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userName" :label="$t('common.name')" min-width="160"></el-table-column><!--姓名-->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="120"></el-table-column><!--手机号-->
                        <el-table-column prop="cardId" :label="$t('common.idCardNumber')" min-width="170"></el-table-column><!--身份证号-->
                        <el-table-column prop="loanTime" :label="$t('common.applyDate')" min-width="170"><!--申请日期-->
                            <template slot-scope="{ row }">{{ row.loanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="lateDays" sortable="custom" :label="$t('common.overdueDays')" min-width="100"><!--逾期天数-->
                            <template slot-scope="{ row }">
                                <div v-if="domain=='Bene'">
                                    <el-button type="text" @click="showSpreadDialog(row)">{{ row.lateDays != null ? row.lateDays : "--" }}</el-button>
                                </div>
                                <div v-else slot-scope="{ row }">{{ row.lateDays != null ? row.lateDays : "--" }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="periodDays" :label="$t('common.borrowingCycle')" min-width="100"><!--借款周期-->
                            <template slot-scope="{ row }">{{ row.periodDays != null ? row.periodDays : "--" }}</template>
                        </el-table-column>
                        <!--<el-table-column prop="correctDay" :label="$t('common.rushingDays')" min-width="100">-->
                            <!--<template slot-scope="{ row }">{{ row.correctDay != null ? row.correctDay : "&#45;&#45;" }}</template>-->
                        <!--</el-table-column>-->
                        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="100"><!--合同金额-->
                            <template slot-scope="{ row }">
                                <el-button v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.contractAmount | formatCurrency }}</el-button>
                                <div v-else>{{ row.contractAmount | formatCurrency }}</div>
                            </template>
                            <!-- <template slot-scope="{ row }" v-else></template> -->
                        </el-table-column>
                        <el-table-column prop="lateRepay" sortable="custom" :label="$t('common.shouldRepayAmount')" width="130"><!--应还金额-->
                            <template slot-scope="{ row }">{{ row.lateRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column prop="payedAmount" sortable="custom" :label="$t('common.actRepayAmount')" width="140"><!--实还金额-->
                            <template slot-scope="{ row }">{{ row.payedAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column prop="derateAmount" sortable="custom" :label="$t('common.remitAmount')" width="100"><!--减免金额-->
                            <template slot-scope="{ row }">{{ row.derateAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.shouldRepayTime')" min-width="170" prop="repayTime"><!--应还时间-->
                            <template slot-scope="{ row }">
                                <el-button  v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</el-button>
                                <div v-else>{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
                            </template>
                            <!-- <template slot-scope="{ row }" v-else>{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template> -->
                        </el-table-column>

                        <el-table-column prop="totalPeriods" v-if="showSpread" :label="$t('install.totalBorrowPeriod')" min-width="150"></el-table-column><!--借款总周期-->
                        <el-table-column prop="period" v-if="showSpread" :label="$t('install.currentBorrowPeriod')" min-width="150"></el-table-column><!--借款当前周期-->


                        <el-table-column align="left" sortable="custom" :label="$t('collection.promiseRepayTime')" min-width="170" prop="promiseTime"><!--承诺还款时间-->
                            <template slot-scope="{ row }">{{ row.promiseTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="teamName" sortable="custom" :label="$t('common.status')" min-width="100"></el-table-column><!--状态-->
                        <el-table-column prop="collectionUserName" sortable="custom" :label="$t('common.recruiter')" min-width="150"></el-table-column><!--催收员-->
                        <el-table-column prop="commitCount" sortable="custom" :label="$t('tel.followTimes')" min-width="110">
                            <template slot-scope="{ row }">{{ row.commitCount || 0 }}</template>
                        </el-table-column><!--跟进次数-->
                        <el-table-column align="left" sortable="custom" :label="$t('common.lastContactTime')" min-width="170" prop="commitNoteTime"><!--最后联系时间-->
                            <template slot-scope="{ row }">{{ row.commitNoteTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="telFeedBack" :label="$t('collection.contactResult')" width="250"><!--联络结果-->
                            <template slot-scope="{ row }">{{ selectTelFeedBack(row.telFeedBack) }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.remark')" prop="noteRemark" :show-overflow-tooltip="true" min-width="180"></el-table-column><!--备注-->
                        <el-table-column align="left" :label="$t('common.applicationMarket')" prop="productChannel" width="130"></el-table-column><!--应用市场-->
                        <el-table-column :label="$t('common.applyChannel')" prop="source" min-width="130"></el-table-column><!--申请渠道-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->

                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130">
                            <template slot-scope="{ row }">{{ row.kana | switchProductName }}</template>
                        </el-table-column><!--伪名-->

                        <el-table-column :label="$t('common.versionName')" prop="appVersion" min-width="130"></el-table-column><!--版本号-->
                        <el-table-column :label="$t('system.appPackage')" prop="appPackage" min-width="130"></el-table-column><!--APP包名-->
                        <el-table-column :label="$t('common.operation')" min-width="300">
                            <template slot-scope="scope">
                                <el-button @click="toggleApplyDialog(scope.row)" type="primary" size="small">{{ $t('common.amountRemit') }}</el-button><!--金额减免-->
                                <el-button @click="showLoanVoucher(scope.row)" type="primary" size="small">{{ $t('common.loanVoucher') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--金额减免申请-->
        <alert-dialog :title="$t('common.amountRemitApply')" class="applyDialog" width="700px" :visible.sync="applyDialog.isVisible">
            <el-form :model="applyDialog.form" :rules="applyDialog.rules" ref="applyDialog.form">
                <el-form-item :label="$t('common.name') + '：'"><!--借款人姓名-->
                    {{ applyDialog.form.userName }}
                </el-form-item>
                <el-form-item :label="$t('common.innerOrderId') + '：'"><!--内部订单号-->
                    {{ applyDialog.form.orderId }}
                </el-form-item>
                <el-form-item :label="$t('common.overduePeriod') + '：'"><!--逾期阶段-->
                    {{ applyDialog.form.teamName }}
                </el-form-item>

                <el-form-item :label="$t('install.currentBorrowPeriod') + '：'"><!--借款当前周期-->
                    {{ applyDialog.form.currentPeriod }}
                </el-form-item>
                <el-form-item :label="$t('install.totalBorrowPeriod') + '：'"><!--借款总期数-->
                    {{ applyDialog.form.totalPeriods }}
                </el-form-item>

                <el-form-item :label="$t('common.remitType') + '：'" prop="type"><!--减免类型-->
                    <el-select v-model="applyDialog.form.type" clearable :placeholder="$t('verify.plsChoose')" style="width: 280px">
                        <el-option key="0" v-if="!showSpread"  :label="$t('common.validityRemit')" value="0" ></el-option><!--有效期减免-->
                        <el-option key="1" :label="$t('common.foreverRemit')" value="1"></el-option><!--永久性减免-->
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('common.canRemitAmount') + '：'"><!--可减免金额-->
                    {{ applyDialog.form.canRemissionAmount }}
                </el-form-item>
                <el-form-item :label="$t('common.applyRemitAmount') + '：'" prop="amount"><!--申请减免金额-->
                    <el-input v-model="applyDialog.form.amount" :placeholder="$t('common.canNotMoreCanRemitAmount')" clearable style="width: 280px"></el-input>
                </el-form-item>
                <el-form-item v-if="applyDialog.form.type == 0" :label="$t('common.validityPeriod') + '：'" prop="validiteTime"><!--有效期-->
                    <el-date-picker v-model="applyDialog.form.validiteTime" :picker-options="pickerOptions"
                                    value-format="timestamp" style="width:150px" :editable="false" type="date"
                                    :placeholder="$t('verify.plsChoose')"></el-date-picker>
                    <el-time-picker v-model="applyDialog.form.validiteTime" :disabled="true"
                                    style="width:130px"></el-time-picker>
                </el-form-item>
                <el-form-item :label="$t('common.applyReason') + '：'" prop="reason"><!--申请理由-->
                    <!--<el-select v-model="applyDialog.form.reason" clearable :placeholder="$t('verify.plsChoose')" style="width: 280px">-->
                        <!--<el-option v-for="(item, $index) in reasonData" :key="$index" :value="item" :label="item"></el-option>-->
                    <!--</el-select>-->
                    <el-input v-model="applyDialog.form.reason" type="textarea" rows="3"  :placeholder="$t('verify.plsInput')" clearable style="width: 280px" maxlength="200"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="applyHandler" type="primary">{{ $t('common.confirm') }}</el-button>
                <el-button @click="applyDialog.isVisible = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </alert-dialog>

        <!--放款凭证-->
        <el-dialog :visible.sync="voucherDialog.isVisible" width="800px" :title="$t('common.loanVoucher')">
            <loan-voucher v-if="voucherDialog.isVisible" :order-id="voucherDialog.orderId"></loan-voucher>
        </el-dialog>

        <!--展期中订单跳转详情确认start-->
        <el-dialog :visible.sync="extensioningDialog.extensioningDialogVisible" :showClose="false" width="416px" :title="$t('common.extensioningDialogTittle')">
            <div class="main">
                <el-row>
                    <el-col :span="10">
                        <span>{{$t('common.extensionPeriod')}} :</span>
                    </el-col>
                </el-row>
                <el-row style="margin-top:10px;">
                    <el-col :span="20">
                        <span>{{extensioningDialog.form.fromDate | formatDate('yyyy-MM-dd')}} {{$t('common.to')}} {{extensioningDialog.form.toDate | formatDate('yyyy-MM-dd')}} {{$t('common.end')}}</span>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer">
                <el-button @click="extensioningDialog.extensioningDialogVisible = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="goDetail(extensioningDialog.form)" type="primary">{{$t('common.confirmOk')}}</el-button>
            </div>
        </el-dialog>
        <!--展期中订单跳转详情确认end-->
        <el-dialog :visible.sync = 'SpreadListObj.isVisible' width="70%">
            <spreadListDialog v-if="SpreadListObj.isVisible" :rowData="SpreadListObj.data"/>
            <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="()=>SpreadListObj.isVisible=false">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import AlertDialog from '@/components/alert-dialog';
    import LoanVoucher from '../../components/voucher';
    import SelectAppList from '@/components/select-app-list';
    import SelectAccountList from '@/components/select-account-list';
    import {domain} from '@/config/'
    import SelectKanaList from '@/components/select-kana-list';
    import spreadListDialog from '../../components/spread-list-Dialog'

    let that = null;
    const dayTime = 1000 * 60 * 60 * 24;
    const today = new Date();
    today.setHours(0);
    today.setMinutes(0);
    today.setSeconds(0);
    today.setMilliseconds(0);
    export default {
        name: 'collection-orderManage-handlingList',
        components: {
            Pagination,
            AlertDialog,
            LoanVoucher,
            SelectAppList,
            SelectAccountList,
            SelectKanaList,
            spreadListDialog
        },
        mixins: [mixin],
        data() {
            const checkAmount = (rule, value, callback) => {
                if (Number(value) > Number(this.applyDialog.form.canRemissionAmount)) {
                    return callback(new Error(this.$t('common.canNotMoreCanRemitAmount')));/*不可大于可减免金额*/
                }
                callback();
            };
            return {
                SpreadListObj:{
                    isVisible:false,
                    data:{},
                },
                domain:'',
                showSpread:false,
                user: this.$storage.get('user'),
                form: {
                    orderId: '',
                    phone: '',
                    userId: '',
                    applyTime: '',
                    teamId: '',
                    telFeedBack: '',
                    promiseTime: [],
                    lastContactTime: [],
                    collectionUserName: '',
                    commitCount: '',
                    repayGradeOrder: '',
                    repayTimeOrder: '',
                    promiseTimeOrder: '',
                    teamIdOrder: '',
                    collectionUserNameOrder: '',
                    commitCountOrder: '',
                    lastCommitTimeOrder: '',
                    derateAmountOrder: '',
                    lateRepayOrder: '',
                    payedAmountOrder: '',
                    productChannel: '',
                    source: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    appVersion: '',
                    appPackage: '',
                    isPartRepay: '',
                    extensionStatus: ''
                },
                rules: {
                    commitCount: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    applyTime: [],
                    teamId: [],
                },
                applyDialog: {
                    isVisible: false,
                    form: {
                        userName: '',
                        orderId: '',
                        teamId: '',
                        type: '1',
                        canRemissionAmount: '',
                        amount: '',
                        validiteTime: '',
                        reason: '',
                        totalPeriods:'',
                        currentPage:''
                    },
                    rules: {
                        amount: [
                            {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                            {pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('verify.plsInput2Digit'), trigger: 'blur'},
                            {validator: checkAmount, trigger: 'blur'}
                        ],
                        type: [
                            {required: true, message: this.$t('verify.plsChoose')}
                        ],
                        validiteTime: [
                            {required: true, message: this.$t('verify.plsChoose')}
                        ],
                        reason: [
                            {required: true, message: this.$t('verify.plsInput')}
                        ],
                    }
                },
                pickerOptions: {
                    disabledDate(val) {
                        return val < today;
                    }
                },
                reasonData: [],
                telFeedBackData: [],
                telPreFeedBackData:[],
                shouldRepayAmount: 0,
                contractAmount: 0,
                payedAmount: 0,
                voucherDialog: {
                    isVisible: false,
                    data: {}
                },
                collectStagesData: [],
                selectDataType: {
                    systemType: 'recruiter',
                    roleCode: 127
                },
                extensioningDialog: {
                    extensioningDialogVisible: false,
                    form: {}
                }
            };
        },
        watch: {
            'applyDialog.form.validiteTime'(val) {
                if (val && val % 3600000 === 0) {
                    this.applyDialog.form.validiteTime = +this.applyDialog.form.validiteTime + (dayTime - 1);
                }
            },
        },
        methods: {
            showSpreadDialog(row){
                this.SpreadListObj = {
                    isVisible:true,
                    data:row
                }
            },
            //生成导出文件
            generateFail(){
                this.$refs.form.validate(val => {
                    if (val) {
                        console.warn(val)
                        const params = this.fillParams();
                        delete params.page
                        const user = this.$storage.get('user');
                        const language = this.$storage.getLocal('language');
                        params.language = language;
                        params.token = user.token;
                        params.source = encodeURIComponent(params.source); //针对特殊渠道转码
                        this.$api.collection.generateHandlingOverdueInfoFile(params).then(res => {
                            let {status} = res;
                            if(status==1){
                             this.$alert(this.$t('common.generateFailTips'), {
                                  confirmButtonText: this.$t('common.confirm'),
                                });
                            }
                        })
                    }
                });
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.collection.queryHandlingDistributionTask(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                        this.getTotalAmount(params);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 415;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 导出列表数据
            exportData() {
                this.$refs.form.validate(val => {
                    if (val) {
                        const params = this.fillParams();
                        const user = this.$storage.get('user');
                        const language = this.$storage.getLocal('language');
                        params.language = language;
                        params.token = user.token;
                        params.source = encodeURIComponent(params.source); //针对特殊渠道转码
                        const {$apiConf} = this;
                        const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.collection.exportHandlingOverdueInfoFile, ['page']);
                       this.$openNewBlank(url);
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    collectionUserId: '',
                    orderId: form.orderId,
                    phone: form.phone,
                    teamId: form.teamId,
                    userId: form.userId,
                    lstartTime: '',
                    lendTime: '',
                    telFeedBack: form.telFeedBack,
                    collectionUserName: form.collectionUserName,
                    commitCount: form.commitCount,
                    productChannel: form.productChannel,
                    source: form.source,
                    appName: form.appName,
                    kana:form.kana,
                    whiteProductName:form.whiteProductName,
                    appVersion: form.appVersion,
                    appPackage: form.appPackage,
                    isPartRepay: form.isPartRepay,
                    extensionStatus: form.extensionStatus,
                    promiseTimeStart: '',
                    promiseTimeEnd: '',
                    lastCommitTimeStart: '',
                    lastCommitTimeEnd: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
//                Object.keys(form).forEach(key => {
//                    if (typeof form[key] === 'string' && form[key]) {
//                        form[key] = form[key].trim();
//                        params[key] = form[key];
//                    }
//                });
                if (form.applyTime && form.applyTime.length) {
                    params.lstartTime = form.applyTime[0];
                    params.lendTime = form.applyTime[1];
                }
                if (form.promiseTime && form.promiseTime.length >= 2) {
                    params.promiseTimeStart = form.promiseTime[0];
                    params.promiseTimeEnd = form.promiseTime[1];
                }
                if (form.lastContactTime && form.lastContactTime.length >= 2) {
                    params.lastCommitTimeStart = form.lastContactTime[0];
                    params.lastCommitTimeEnd = form.lastContactTime[1];
                }
                if(form.repayGradeOrder) {
                    params.repayGradeOrder = form.repayGradeOrder;
                }
                if(form.repayTimeOrder) {
                    params.repayTimeOrder = form.repayTimeOrder;
                }
                if(form.promiseTimeOrder) {
                    params.promiseTimeOrder = form.promiseTimeOrder;
                }
                if(form.teamIdOrder) {
                    params.teamIdOrder = form.teamIdOrder;
                }
                if(form.collectionUserNameOrder) {
                    params.collectionUserNameOrder = form.collectionUserNameOrder;
                }
                if(form.commitCountOrder) {
                    params.commitCountOrder = form.commitCountOrder;
                }
                if(form.lastCommitTimeOrder) {
                    params.lastCommitTimeOrder = form.lastCommitTimeOrder;
                }
                if(form.derateAmountOrder) {
                    params.derateAmountOrder = form.derateAmountOrder;
                }
                if(form.lateRepayOrder) {
                    params.lateRepayOrder = form.lateRepayOrder;
                }
                if(form.payedAmountOrder) {
                    params.payedAmountOrder = form.payedAmountOrder;
                }
                return params;
            },
            beforeGoDetail(row) {
              if (row.extensionStatus === 1) {
                this.extensioningDialog.form = Object.assign({}, row);
                this.extensioningDialog.extensioningDialogVisible = true;
              }else {
                this.goDetail(row);
              }
            },
            goDetail(row) {
                console.warn(row.overdueInfoId)
                this.extensioningDialog.extensioningDialogVisible = false;
                setTimeout(() => {
                    this.$openNewBlank(`#/conf/collection/order-manage/order-detail/${row.id}/${row.orderId}/${row.repayStatus}/${row.userId}/${row.repayScheduleId}/cs?appPackage=${row.appPackage}`);
                }, 100);
            },
            //获取申请减免理由数据
            getReasonData() {
                this.$api.collection.getDicts({'type': 7}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.reasonData = data;
                    }
                });
            },
            //金额减免
            toggleApplyDialog(row) {
                // if(row.lateDays>0){
                //     this.$message.warning("此订单已做逾期天数冲正，不可操作！");
                //     return false;
                // }
                this.$api.collection.queryMaxDerateAmount({'orderId': row.orderId}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.applyDialog.form.userName = row.userName;
                        this.applyDialog.form.orderId = row.orderId;
                        this.applyDialog.form.teamId = row.teamId;
                        this.applyDialog.form.teamName = row.teamName;
                        this.applyDialog.form.canRemissionAmount = data.canDerateAmount;
                        this.$refs['applyDialog.form'].resetFields();
                        this.applyDialog.form.totalPeriods = row.totalPeriods;
                        this.applyDialog.form.currentPeriod = row.period;
                        this.applyDialog.isVisible = true;
                    }
                });
            },
            //确认申请金额减免
            applyHandler() {
                this.$refs['applyDialog.form'].validate((val) => {
                    if (val) {
                        const form = this.applyDialog.form;
                        const params = {
                            orderId: form.orderId,
                            userName: form.userName,
                            canDerateAmount: form.canRemissionAmount,
                            derateAmount: form.amount,
                            reason: form.reason,
                            derateType: form.type,
                            derateOverduePeriod: form.teamId,
                            validiteTime: (form.type == '0') ? form.validiteTime : '',
                            collectionUserName: this.$storage.get('user').username,
                            totalPeriods:form.totalPeriods,
                            currentPeriod:form.currentPeriod
                        };
                        this.$api.collection.applyDerateAmount(params).then(res => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.applyDialog.isVisible = false;
                                this.getTableData();
                            }
                        });
                    }
                })
            },
            // 获取联络结果数据
            getDicts() {
                this.$api.collection.queryDictForNotes().then((res) => {
                    const { status, data, error } = res;
                    if (status === '1' && error === '00000000') {
                        this.telFeedBackData = data.telFeedBacks;
                    }
                });
            },
            // 获取联络结果数据
            gePretDicts() {
                this.$api.collection.getDicts({'type': 8}).then((res) => {
                    const { status, data, error } = res;
                    if (status === '1' && error === '00000000') {
                        this.telPreFeedBackData = data.telFeedBacks;
                    }
                });
            },
            changeTableSearch(val) {
                this.form.repayGradeOrder = '';
                this.form.repayTimeOrder = '';
                this.form.promiseTimeOrder = '';
                this.form.teamIdOrder = '';
                this.form.collectionUserNameOrder = '';
                this.form.commitCountOrder = '';
                this.form.lastCommitTimeOrder = '';
                this.form.derateAmountOrder = '';
                this.form.lateRepayOrder = '';
                this.form.payedAmountOrder = '';
                if(val.prop === 'lateDays') {
                    this.form.repayGradeOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'repayTime') {
                    this.form.repayTimeOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'promiseTime') {
                    this.form.promiseTimeOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'teamName') {
                    this.form.teamIdOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'collectionUserName') {
                    this.form.collectionUserNameOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'commitCount') {
                    this.form.commitCountOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'commitNoteTime') {
                    this.form.lastCommitTimeOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'derateAmount') {
                    this.form.derateAmountOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'lateRepay') {
                    this.form.lateRepayOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                if(val.prop === 'payedAmount') {
                    this.form.payedAmountOrder = (val.order === 'ascending') ? 'ASC' : 'DESC';
                }
                this.page.currentPage = 1;
                this.getTableData();
            },
            showLoanVoucher(row) {
                this.voucherDialog.orderId = row.orderId;
                this.voucherDialog.isVisible = true;
            },
            getTotalAmount(params) {
                params.repayStatus = 0;
                params.isOverdue = 1;
                params.isAssign = 1;
                this.$api.collection.queryHandlingOverdueTotal(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000' && data) {
                        this.shouldRepayAmount = data.lateRepay;
                        this.contractAmount = data.contractAmount;
                        this.payedAmount = data.payedAmount;
                    }
                    else {
                        this.shouldRepayAmount = 0;
                        this.contractAmount = 0;
                        this.payedAmount = 0;
                    }
                });
            },
            getCollectStages() {
                const params = {
                    name: '',
                    active: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.collectStagesData = data;
                    }
                });
            },
            //控制表格整行高亮
            tableRowClassName({row, rowIndex}) {
                if (+row.isPartRepay === 1) {
                    return 'blue_color';
                }
            },
            selectTelFeedBack(val) {
                let result = {};
                console.warn(this.telFeedBackData,'dasdsad')
                this.telFeedBackData.forEach(item=>{
                    if(val==item.nid){
                         result = item
                    }
                });
                this.telPreFeedBackData.forEach(item=>{
                    if(val==item.nid){
                        result = item
                    }
                })
                return result.value ?result.value:''
            },
        },
        filters: {
            switchTelFeedBack(val) {
                let result = {};
                console.warn(this.telFeedBackData,'dasdsad')
                this.telFeedBackData.forEach(item=>{
                    if(val==item.nid){
                        result = item
                    }
                });
                this.telPreFeedBackData.forEach(item=>{
                    if(val==item.nid){
                        result = item
                    }
                })
                return result.value ?result.value:''
                
                
                
                

                switch(val + '') {
                    case '1':
                        return that.$t('collection.telFeedBacks.contactFraud');// 联系人造假
                    case '2':
                        return that.$t('collection.telFeedBacks.jobFraud');// 工作信息造假
                    case '3':
                        return that.$t('collection.telFeedBacks.leave');// 离职
                    case '4':
                        return that.$t('collection.telFeedBacks.note');// 投诉备注
                    case '5':
                        return that.$t('collection.telFeedBacks.lostContact');// 失去联系/拒绝转告
                    case '6':
                        return that.$t('collection.telFeedBacks.suspectedFraud');// 疑似欺诈
                    case '7':
                        return that.$t('collection.telFeedBacks.leaveMessage');// 留口信
                    case '8':
                        return that.$t('collection.telFeedBacks.setDateContact');// 另设日期联系
                    case '9':
                        return that.$t('collection.telFeedBacks.reduction');// 承缴/减免
                    case '10':
                        return that.$t('collection.telFeedBacks.thirdCompensation');// 三方代偿
                    case '11':
                        return that.$t('collection.telFeedBacks.statementPaid');// 声明已缴
                    case '12':
                        return that.$t('collection.telFeedBacks.noOneHeard');// 无人接听
                    case '13':
                        return that.$t('collection.telFeedBacks.busy');// 忙音/通话中
                    case '14':
                        return that.$t('collection.telFeedBacks.phoneRejection');// 电话拒接
                    case '15':
                        return that.$t('collection.telFeedBacks.shutDown');// 关机
                    case '16':
                        return that.$t('collection.telFeedBacks.unableToConnect');// 无法接通
                    case '17':
                        return that.$t('collection.telFeedBacks.voiceCall');// 语音电话
                    case '18':
                        return that.$t('collection.telFeedBacks.smsNotification');// 短信通知
                    case '19':
                        return that.$t('collection.telFeedBacks.downtime');// 停机
                    case '20':
                        return that.$t('collection.telFeedBacks.empty');// 空号
                    default:
                        return val
                }
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            this.showSpread = domain.showSpread();
            that = this;
            this.getCollectStages();
            this.getTableData({currentPage: this.page.currentPage}, this.form);
            this.getReasonData();
            this.getDicts();
            this.gePretDicts()
        },
    };
</script>

<style lang="scss">
    .deal-list {
        .applyDialog {
            .el-form-item {
                margin-bottom: 14px;
                .el-form-item__label {
                    width: 260px;
                    text-align: right;
                    padding: 0px;
                }
                .el-form-item__error {
                    padding: 2px 0 0 260px;
                }
            }
        }
    }

    [data-page=collection-orderManage-handlingList] {
        .noteRed {
            color: red;
        }
        .blue_color {
            color: #1983FA;
        }
        .purple_color {
            color: #D209CB;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            // word-break: keep-all;
            word-wrap: break-word;
        }
        /*.el-tooltip__popper {*/
            /*max-width: 300px;*/
            /*word-break: break-all;*/
            /*background-color: #fff;*/
            /*box-shadow: 0px 0px 5px #ccc;*/
            /*color: #000;*/
        /*}*/
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .totalAmount {
            font-size:14px;
            font-weight:bold;
            margin:0 0 10px 0;
            span {
                margin: 0 50px 0 0;
            }
        }
    }
</style>
